<template>
  <div>
    <h1>vue3</h1>
    <p v-memo="[count]">{{ count }}</p>
    <button @click="count++">按钮</button>
  </div>
</template>

<script lang="ts">
/*
  指令语法：
    1. 常用
      - v-bind
        - 简写：:
        - :xxx="xxx"
        - 作用：单向数据绑定（给标签属性绑定动态的值）

        指令修饰符：
          - .sync(vue2) 
          - vue3没了.sync

      - v-model
        - v-model="xxx"
        - 作用：双向数据绑定
        - 原理：
          简单理解：给元素绑定value属性和input事件  
          完整理解：
            - 文本类型的 <input> 和 <textarea> 元素会绑定 value property 并侦听 input 事件；
              - 普通输入框和文本域，绑定value属性和input事件
            - <input type="checkbox"> 和 <input type="radio"> 会绑定 checked property 并侦听 change 事件；
              - 多选（checkbox）和单选（radio），绑定checked属性和change事件
            - <select> 会绑定 value property 并侦听 change 事件。
              - 下拉列表，绑定value属性和change事件

      - v-on
        - 简写：@
        - @xxx="xxx"
        - 作用：用来绑定事件监听
        - 参数
          - @click="handleClick"  event
          - @click="handleClick(111, 222, 333)"  111, 222, 333
          - @click="handleClick(111, 222, 333, $event)"  111, 222, 333, event
        - 事件修饰符
          - .prevent 阻止事件默认行为
          - .stop 阻止事件冒泡
          - .native 绑定原生DOM事件（vue3没了）
        - 按键修饰符
          - .enter 

      - v-for
        - v-for="(item, index) in xxx" :key="item.id"
        - 作用：列表渲染（遍历展示数据）
        - key作用：diff算法中尽可能复用DOM元素。为了达到这个目的，保证key更新前后一致。id

      - v-if / v-else-if / v-else
        - 作用：条件渲染（显示&隐藏）
      - v-show
        - 作用：条件渲染（显示&隐藏）

      v-if和v-show的区别：
        - v-if隐藏时会删除元素
        - v-show隐藏时通过css的display:none来隐藏的 
        - 所以频繁切换v-show好，不频繁v-if好

      - v-slot
        - 简写：#
        - 作用：具名插槽或作用域插槽

      - v-memo
        - v-memo="[依赖项]"
        - 当依赖项发生变化，缓存的元素才会重新渲染

    2. 不常用（了解）
      - v-text 设置元素文本内容
      - v-html 设置元素文本内容（标签文本会被解析成元素）
      - v-pre  跳过渲染
      - v-once 只解析一次
      - v-cloak 当插槽解析时，隐藏元素，解析完显示
*/
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<style></style>
